<!--
 * @Description:
 * @Author bianpengfei
 * @create 2021/4/8 23:26
 -->
<template>
  <div class="g-app__header">
    <!--默认布局-->
    <template v-if="_layout == 'default'">
      <div class="g-app__header-left">
        <i
          :class="[_menuIsCollapse ? 'bpf-icon-weibiaoti26' : 'bpf-icon-shousuo', 'g-el-icon-s', 'iconfont-pc']"
          @click.stop="_menuIsCollapse = !_menuIsCollapse"
        ></i>
        <breadcrumb v-if="_breadcrumbShow"></breadcrumb>
      </div>
      <personal-center class="g-app__header-right"></personal-center>
    </template>

    <!--曼荼罗公司里布局-->
    <template v-else-if="_layout == 'mandala'">
      <logo class="g-logo__wrap g-app__header-lt"></logo>
      <div class="g-app__header-ct">
        <i
          :class="[_menuIsCollapse ? 'bpf-icon-weibiaoti26' : 'bpf-icon-shousuo', 'g-el-icon-s', 'iconfont-pc']"
          @click.stop="_menuIsCollapse = !_menuIsCollapse"
        ></i>
      </div>
      <personal-center class="g-app__header-right g-app__header-rt"></personal-center>
    </template>

    <!--水平-->
    <template v-if="_layout == 'horizontal'">
      <div class="g-app__header-left">
        <i
          :class="[_menuIsCollapse ? 'bpf-icon-weibiaoti26' : 'bpf-icon-shousuo', 'g-el-icon-s', 'iconfont-pc']"
          @click.stop="_menuIsCollapse = !_menuIsCollapse"
        ></i>
        <breadcrumb v-if="_breadcrumbShow"></breadcrumb>
      </div>
      <personal-center class="g-app__header-right"></personal-center>
    </template>

    <!--垂直-->
    <template v-else-if="_layout == 'vertical'">
      <div class="g-app__header-left">
        <logo class="g-logo__wrap"></logo>
      </div>
      <div class="g-app__header-center">
        <Menu
          v-if="menuColumnIdx && menuColumnIdx > 0"
          mode="horizontal"
          :defaultActive="$route.fullPath"
          :menus="_verticalMenuData"
          class="g-menu-horizontal"
          @onClickMenuItem="onClickMenuItem"
        ></Menu>
      </div>
      <personal-center class="g-app__header-right"></personal-center>
    </template>

    <!--水平 + 垂直布局-->
    <template v-else-if="_layout == 'horizontal-vertical'">
      <div class="g-app__header-left">
        <i
          :class="[_menuIsCollapse ? 'bpf-icon-weibiaoti26' : 'bpf-icon-shousuo', 'g-el-icon-s', 'iconfont-pc']"
          @click.stop="_menuIsCollapse = !_menuIsCollapse"
        ></i>
      </div>
      <div class="g-app__header-center">
        <Menu
          v-if="menuColumnIdx && menuColumnIdx > 0"
          mode="horizontal"
          :defaultActive="_hvDefaultActive"
          :menus="_hvMenuFirstLevel"
          class="g-menu-horizontal"
          @onClickMenuItem="onClickMenuItemFirstLevel"
        ></Menu>
      </div>
      <personal-center class="g-app__header-right"></personal-center>
    </template>
  </div>
</template>

<script>
import Breadcrumb from '../../components/breadcrumb'
import Logo from '../../components/logo'
import Menu from '../../components/menu'
import PersonalCenter from '../../components/personal-center'
import { throttleDtor, isNumber } from '@bianpengfei/utils'

import { get, sync } from 'vuex-pathify'
import { isExternalLink } from '@libs/utils/common'

export default {
  name: 'app-header',
  components: {
    Breadcrumb,
    Logo,
    Menu,
    PersonalCenter
  },
  computed: {
    _headerShow: sync('app/headerShow'),
    _menuIsCollapse: sync('app/menuIsCollapse'),
    _layout: sync('app/layout'),
    _menuShow: get('app/menuShow'),
    _menus: sync('app/menus'),
    _menusDefaultOpeneds: get('app/menusDefaultOpeneds'),
    _breadcrumbShow: get('app/breadcrumbShow'),
    _breadcrumb: get('app/breadcrumb'),

    /*垂直布局menu数据*/
    _verticalMenuData() {
      let menu = this._menus.filter((v) => !v.meta?.hidden).slice()
      if (isNumber(this.menuColumnIdx) && this.menuColumnIdx != -1 && this.menuColumnIdx < menu.length) {
        menu = menu.slice(0, this.menuColumnIdx).concat({
          icon: 'el-icon-more',
          index: 'el-icon-more',
          children: menu.slice(this.menuColumnIdx)
        })
        return menu
      }
      return menu
    },

    /*垂直+水平 激活的菜单项*/
    _hvDefaultActive() {
      let active = this.$route.path
      if (Array.isArray(this._breadcrumb)) {
        console.log('children-_breadcrumb', this._breadcrumb)
        const path = this._breadcrumb.slice(0).shift()?.path
        const children = this._menus.filter((v) => !v?.meta?.hidden).find((v) => v.path == path)?.children
        console.log('children', children)
        if (Array.isArray(children)) {
          active = children.slice(0).shift()?.path
        }
      }
      return active
    },

    /**垂直+水平 布局menu第一层数据*/
    _hvMenuFirstLevel() {
      let menu = this._menus
        .filter((v) => !v.meta?.hidden)
        .map((v) => {
          const vClone = { ...v }
          if (Array.isArray(v.children)) {
            vClone.path = vClone.children.slice(0).shift()?.path
          }
          if (vClone.children) {
            delete vClone.children
          }
          return vClone
        })
      if (isNumber(this.menuColumnIdx) && this.menuColumnIdx < menu.length && this.menuColumnIdx != -1) {
        menu = menu.slice(0, this.menuColumnIdx).concat({
          icon: 'el-icon-more',
          index: 'el-icon-more',
          children: menu.slice(this.menuColumnIdx)
        })
        return menu
      }
      return menu
    }
  },
  data() {
    return {
      menuColumnIdx: -1 // 垂直布局 菜单最多展示几列
    }
  },

  watch: {
    _layout() {
      this.$nextTick(() => {
        this.handleResize()
      })
    }
  },

  mounted() {
    window.addEventListener('resize', this.handleResize)
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('resize', this.handleResize)
    })
    this._resizingId = 0 // 重新计算次数
    setTimeout(() => {
      this.handleResize()
    }, 20)
  },

  methods: {
    @throttleDtor(50)
    handleResize() {
      this._resizingId++
      let rId = 0
      if (['horizontal-vertical', 'vertical'].includes(this._layout)) {
        rId = this._resizingId
        const itemWidth = 160 // 默认设置160
        const elMenuWrap = this.$el.querySelector('.g-app__header-center')
        if (elMenuWrap.clientWidth) {
          this.menuColumnIdx = Math.floor((elMenuWrap.clientWidth - 80) / itemWidth)
          console.log('handleResize', this.menuColumnIdx, this._menus.length)
          const innerHeightFn = () => {
            this.$nextTick(() => {
              if (rId === this._resizingId) {
                const $menuWrap = document.querySelector('.g-menu__wrap')
                const $menuCenter = document.querySelector('.g-app__header-center')
                console.log('递归中', $menuWrap.clientHeight, $menuCenter.clientHeight)
                if (this.menuColumnIdx > 2 && $menuCenter.clientHeight < $menuWrap.clientHeight) {
                  this.menuColumnIdx--
                  this.$nextTick(() => {
                    innerHeightFn()
                  })
                }
              }
            })
          }
          innerHeightFn()
        }
      }
    },

    /*垂直布局 点击item*/
    onClickMenuItem(item) {
      if (isExternalLink(item.path)) {
        return window.open(item.path)
      }
      this.$router.push(item.path || item.index)
    },

    /*水平 + 垂直布局 点击item*/
    onClickMenuItemFirstLevel(item) {
      if (isExternalLink(item.path)) {
        return window.open(item.path)
      }
      this.$router.push(item.path || item.index)
    }
  }
}
</script>
